<template>
    <div class="admin-center">
        <!-- 个人信息卡 -->
        <el-col :span="6">
            <el-card shadow="hover" class="admin-card">
                <div class="admin">
                    <img class="admin_picture" :src="adminImg"/>
                    <div class="admin_info">
                        <p class="name">{{ name }}</p>
                        <p class="position">超级管理员</p>
                        <div class="login-info">
                            <p>上次登录时间：{{ lastLoginTime }}</p>
                            <p>上次登录地点：{{ lastLoginLocation }}</p>
                        </div>
                        <div class="language-details">
                            <h3>语言详情</h3>
                            <div class="skill-progress">
                                <span>Vue</span>
                                <el-progress :percentage="71.3" color="#409EFF"></el-progress>
                            </div>
                            <div class="skill-progress">
                                <span>JavaScript</span>
                                <el-progress :percentage="24.1" color="#E6A23C"></el-progress>
                            </div>
                            <div class="skill-progress">
                                <span>CSS</span>
                                <el-progress :percentage="13.7" color="#F56C6C"></el-progress>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>

        <!-- 统计信息卡片 -->
        <el-col :span="18">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card shadow="hover" class="statistic-card">
                        <div class="statistic-content">
                            <i class="el-icon-user-solid statistic-icon" style="font-size: 50px; color: #409EFF;"></i>
                            <div class="statistic-data">
                                <p class="statistic-number" style="font-size: 28px; color: #303133;">1234</p>
                                <p class="statistic-label" style="font-size: 16px; color: #606266;">用户访问量</p>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="statistic-card">
                        <div class="statistic-content">
                            <i class="el-icon-bell statistic-icon" style="font-size: 50px; color: #E6A23C;"></i>
                            <div class="statistic-data">
                                <p class="statistic-number" style="font-size: 28px; color: #303133;">321</p>
                                <p class="statistic-label" style="font-size: 16px; color: #606266;">系统消息</p>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="statistic-card">
                        <div class="statistic-content">
                            <i class="el-icon-shopping-bag-1 statistic-icon" style="font-size: 50px; color: #F56C6C;"></i>
                            <div class="statistic-data">
                                <p class="statistic-number" style="font-size: 28px; color: #303133;">5000</p>
                                <p class="statistic-label" style="font-size: 16px; color: #606266;">数量</p>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 待办事项 -->
            <el-card shadow="hover" class="todo-card">
                <div slot="header" class="clearfix">
                    <span>待办事项</span>
                    <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                </div>
                <el-table :data="todos" style="width: 100%">
                    <el-table-column prop="content" label="任务">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.checked">{{ scope.row.content }}</el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <i class="el-icon-edit"></i>
                            <el-button @click="deleteTodo(scope.$index)" icon="el-icon-delete" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>

        <!-- 轮播图 -->
        <el-col :span="24" style="border-radius: 20px">
            <el-carousel height="300px">
                <el-carousel-item v-for="item in images" :key="item">
                    <img :src="item" alt="Carousel Image" style="width: 100%; height: 100%; object-fit: cover;">
                </el-carousel-item>
            </el-carousel>
        </el-col>

    </div>
</template>

<script>
export default {
    data() {
        return {
            adminImg: '',
            name: '',
            password: '',
            mockData: {
                costData: {
                    date: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    data: [
                        { '部门A': 1000, '部门B': 2000, '部门C': 1500 },
                        { '部门A': 1200, '部门B': 2100, '部门C': 1600 },
                        { '部门A': 1300, '部门B': 2200, '部门C': 1700 },
                        { '部门A': 1400, '部门B': 2300, '部门C': 1800 },
                        { '部门A': 1500, '部门B': 2400, '部门C': 1900 },
                        { '部门A': 1600, '部门B': 2500, '部门C': 2000 },
                        { '部门A': 1700, '部门B': 2600, '部门C': 2100 },
                        { '部门A': 1800, '部门B': 2700, '部门C': 2200 },
                        { '部门A': 1900, '部门B': 2800, '部门C': 2300 },
                        { '部门A': 2000, '部门B': 2900, '部门C': 2400 },
                        { '部门A': 2100, '部门B': 3000, '部门C': 2500 },
                        { '部门A': 2200, '部门B': 3100, '部门C': 2600 }
                    ]
                },
                weekData: [
                    { date: '周一', value: 5000 },
                    { date: '周二', value: 6000 },
                    { date: '周三', value: 7000 },
                    { date: '周四', value: 8000 },
                    { date: '周五', value: 9000 },
                    { date: '周六', value: 10000 },
                    { date: '周日', value: 11000 }
                ],
                peopleData: [
                    { value: 335, name: '技术部' },
                    { value: 310, name: '市场部' },
                    { value: 234, name: '销售部' },
                    { value: 135, name: '财务部' },
                    { value: 1548, name: '人力资源部' }
                ]
            },
            activeTab: 'activity',
            activities: [
                { timestamp: 'Shared publicly - 7:30 PM today', content: 'Lorem ipsum represents a long-held tradition for designers, typographers and the like.' },
                { timestamp: 'Sent you a message - yesterday', content: 'Lorem ipsum represents a long-held tradition for designers, typographers and the like.' },
                { timestamp: 'Posted 4 photos - 2 days ago', content: 'Lorem ipsum represents a long-held tradition for designers, typographers and the like.' }
            ],
            images: [
                'https://placehold.co/1200x300',
                'https://placehold.co/1200x300',
                'https://placehold.co/1200x300'
            ],
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: 'Please input username', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: 'Please input password', trigger: 'blur' }
                ]
            },
            lastLoginTime: '2019-11-01',
            lastLoginLocation: '东莞',
            todos: [
                { content: '今天要修复100个bug', checked: false },
                { content: '今天要修复100个bug', checked: false },
                { content: '今天要写100行代码加几个bug吧', checked: false },
                { content: '今天要修复100个bug', checked: true },
                { content: '今天要写100行代码加几个bug吧', checked: true }
            ]
        };
    },
    methods: {
        getAdmin() {
            let loginData = JSON.parse(window.sessionStorage.getItem('token'))
            this.adminImg = loginData[0].image
            this.name = loginData[0].name
            this.password = loginData[0].password
        },
        renderCharts() {
            const cost = this.mockData.costData
            const xData = cost.date
            const keyArray = Object.keys(cost.data[0])
            const series = []
            keyArray.forEach(key => {
                series.push({
                    name: key,
                    data: cost.data.map(item => item[key]),
                    type: 'line'
                })
            })

            // 折线图
            const costOption = {
                title: {
                    text: '2021年各部门每月消费金额'
                },
                tooltip: {},
                legend: {
                    data: keyArray
                },
                xAxis: {
                    data: xData
                },
                yAxis: {},
                series
            }
            const Line = echarts.init(this.$refs.cost)
            Line.setOption(costOption)

            //柱状图
            const weekOption = {
                title: {
                    text: '上周公司收入详情'
                },
                tooltip: {},
                legend: {
                    data: ['收入(元)']
                },
                xAxis: {
                    data: this.mockData.weekData.map(item => item.date)
                },
                yAxis: {},
                series: [{
                    name: '收入(元)',
                    data: this.mockData.weekData.map(item => item.value),
                    type: 'bar'
                }]
            }
            const Bar = echarts.init(this.$refs.week)
            Bar.setOption(weekOption)

            //饼图
            const peopleOption = {
                title: {
                    text: '公司人数分布情况(人)'
                },
                tooltip: {},
                series: [{
                    type: 'pie',
                    data: this.mockData.peopleData
                }]
            }
            const Pie = echarts.init(this.$refs.people)
            Pie.setOption(peopleOption)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        deleteTodo(index) {
            this.todos.splice(index, 1);
        }
    },
    mounted() {
        this.getAdmin()
        this.$axios.get('/home/getData').then(res => {
            const { code, data } = res.data
            if (code === 200) {
                this.renderCharts(data)
            }
        }).catch(() => {
            this.renderCharts()
        })
    }
}
</script>

<style scoped>
.el-col{
  padding: 0px 20px 10px;
}

.admin-center {
    padding: 20px;
}

.admin-card {
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.admin-card:hover,
.statistic-card:hover,
.todo-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.admin {
    display: flex;
    align-items: center;
}

.admin_picture {
    width: 80px;
    height: 200px;
    margin-right: 20px;
}

.admin_info {
    flex: 1;
}

.name {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #303133;
}

.position {
    font-size: 18px;
    color: #606266;
}

.login-info {
    margin-top: 20px;
}

.language-details {
    margin-top: 20px;
}

.skill-progress {
    margin-bottom: 10px;
}

.statistic-card {
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.statistic-content {
    display: flex;
    align-items: center;
    padding: 20px;
}

.statistic-icon {
    font-size: 50px;
    margin-right: 20px;
}

.statistic-data {
    flex: 1;
}

.statistic-number {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
}

.statistic-label {
    font-size: 16px;
    color: #606266;
}

.todo-card {
    margin-top: 20px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.el-button--text {
    margin-left: 10px;
}
</style>